<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="课程改进措施" prop="resource">
			  <el-input v-model="queryParams.resource" placeholder="请输入课程改进措施" clearable @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="参考文献" prop="methods">
			  <el-input v-model="queryParams.methods" placeholder="请输入参考文献" clearable @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
			  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
			  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="mb8">
		  <el-col :span="1.5" >
		    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
		       >新增</el-button>
		  </el-col>
		 <el-col :span="1.5">
		    <span style="font-size: 24px;">{{courseName}}</span>
		  </el-col>
		  <!-- <el-col :span="1.5">
		    <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
		      v-hasPermi="['score:course:remove']">删除</el-button>
		  </el-col> -->
		 <!-- <el-col :span="1.5">
		    <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
		      v-hasPermi="['score:course:import']">导入</el-button>
		  </el-col>
		  <el-col :span="1.5">
		      <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
		        v-hasPermi="['score:course:export']">导出</el-button>
		    </el-col> -->
		   <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
		  </el-row>
		  <el-table v-loading="loading" :data="resourceList" @selection-change="handleSelectionChange">
		    <el-table-column type="selection" width="55" align="center" />
		    <el-table-column label="课程改进措施" align="center" prop="methods" show-overflow-tooltip />
		    <el-table-column label="参考文献" align="center" prop="resource" show-overflow-tooltip />
		  <!-- <el-table-column label="创建时间" align="center" prop="createTime" />
		  <el-table-column label="修改时间" align="center" prop="updateTime" /> -->
		    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
		      <template slot-scope="scope">
		        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
		          v-hasPermi="['score:course:edit']">修改</el-button>
		        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
		          v-hasPermi="['score:course:remove']">删除</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
		  
		  <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
		    @pagination="getList" />
		  
		 
		  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
		    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
			  <el-form-item label="课程改进措施" prop="methods">
			    <el-input type="textarea" :rows="2" v-model="form.methods" placeholder="请输入课程改进措施" />
			  </el-form-item>
			  <el-form-item label="参考文献" prop="resource">
			    <el-input type="textarea" :rows="2" v-model="form.resource" placeholder="请输入参考文献" />
			  </el-form-item>
		    </el-form>
		    <div slot="footer" class="dialog-footer">
		      <el-button type="primary" @click="submitForm">确 定</el-button>
		      <el-button @click="cancel">取 消</el-button>
		    </div>
		  </el-dialog>
		  
		 
		<!--  <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
		    <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
		      :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
		      :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
		      <i class="el-icon-upload"></i>
		      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
		      <div class="el-upload__tip text-center" slot="tip">
		        <div class="el-upload__tip" slot="tip">
		          <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的数据
		        </div>
		        <span>仅允许导入xls、xlsx格式文件。</span>
		        <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
		          @click="importTemplate">下载模板</el-link>
		      </div>
		    </el-upload>
		    <div slot="footer" class="dialog-footer">
		      <el-button type="primary" @click="submitFileForm">确 定</el-button>
		      <el-button @click="upload.open = false">取 消</el-button>
		    </div>
		  </el-dialog> -->
	</div>
</template>

<script>
	import {list,add,update,deletes,getResourceInfo} from '@/api/score/resource'
	import {getToken} from "@/utils/auth";
	export default {
		data() {
			return{
				queryParams:{
					pageNum:1,
					paseSize:10,
					resource:'',
					methods:'',
					courseId:this.$route.query.courseId
				},
				courseName:this.$route.query.courseName,
                courseId:this.$route.query.courseId,
				rules:[],
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 课程管理表格数据
				resourceList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open:false,
				form:[],
				upload: {
				  // 是否显示弹出层（用户导入）
				  open: false,
				  // 弹出层标题（用户导入）
				  title: "",
				  // 是否禁用上传
				  isUploading: false,
				  // 是否更新已经存在的用户数据
				  updateSupport: 0,
				  // 设置上传的请求头部
				  headers: { Authorization: "Bearer " + getToken() },
				  // 上传的地址
				  url: process.env.VUE_APP_BASE_API + "/score/courseAssess/importData"
				},
			}
		},
		created() {
			this.getList()
		},
		methods:{
			async getList(){
				this.loading=true;
				const result=await list(this.queryParams);
				if(result.code==200){
					this.resourceList=result.rows
					this.loading=false;
					this.total=result.total
				}
			},
			handleQuery(){
				this.queryParams.pageNum=1
				this.getList()
			},
			resetQuery(){
				this.resetForm("queryForm")
			},
			handleAdd(){
				this.reset()
				this.form.courseId=this.courseId
				this.open=true
				this.title="添加课程目标改进内容"
			},
			async handleUpdate(row){
				this.reset()
				const id=row.id||this.ids
				const result=await getResourceInfo(id)
				if(result.code==200){
					this.form=result.data
					this.open=true
					this.title="修改课程目标改进内容"
				}
				
			},
			handleDelete(row){
				const id=row.id
				this.$modal.confirm('是否确认删除课程目标改进内容编号为"' + id + '"的数据项？').then(function(){
					return deletes(id);
				}).then(()=>{
					this.getList();
					this.$modal.msgSuccess('删除成功')
				}).catch(()=>{})
			},
			// handleImport(){
			// 	this.upload.title = "用户导入";
			// 	this.upload.open = true;
			// },
			// handleExport(){
			// 	this.download('score/courseAssess/export', {
			// 	  ...this.queryParams
			// 	}, `course_${new Date().getTime()}.xlsx`)
			// },
			cancel() {
			  this.open = false;
			  this.reset();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
			  this.ids = selection.map(item => item.courseassessId)
			  this.single = selection.length !== 1
			  this.multiple = !selection.length
			},
			submitForm(){
				this.$refs["form"].validate(async valide =>{
					if(valide){
						if(this.form.id!=null){
							const result=await update(this.form)
							if(result.code==200){
								this.$modal.msgSuccess('修改成功')
								this.open=false
								this.getList()
							}
						}else{
							console.log(this.form)
						const result=await add(this.form)
						
						if(result.code==200){
							this.$modal.msgSuccess('添加成功')
							this.open=false
							this.getList()
						}	
						}
					}
				})
			},
			/** 下载模板操作 */
			// importTemplate() {
			//   this.download('score/courseAssess/importTemplate', {
			//   }, `course_template_${new Date().getTime()}.xlsx`)
			// },
			// // 文件上传中处理
			// handleFileUploadProgress(event, file, fileList) {
			//   this.upload.isUploading = true;
			// },
			// // 文件上传成功处理
			// handleFileSuccess(response, file, fileList) {
			//   this.upload.open = false;
			//   this.upload.isUploading = false;
			//   this.$refs.upload.clearFiles();
			//   this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
			//   this.getList();
			// },
			// // 提交上传文件
			// submitFileForm() {
			//   this.$refs.upload.submit();
			// },
			reset(){
				this.form={
					id:null,
					resource:null,
					methods:null,
					courseId:null
				},
				this.resetForm("form")
			}
		}
	}
</script>

<style scoped>
	
</style>